<template>
  <div class="container">
    <el-card>
      <el-form :inline="true" :model="form" label-width="80px">
        <el-form-item label="标签名称">
          <el-input
            v-model="form.directoryName"
            style="width: 190px; height: 32px"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.state" placeholder="请选择">
            <el-option
              v-for="item in stateList"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button
            size="medium"
            style="margin-left: 10px; font-size: 12px"
            @click="remove"
            >清除</el-button
          >
          <el-button
            size="medium"
            type="primary"
            style="font-size: 12px"
            @click="search"
            >搜索</el-button
          >
          <el-button
            @click="addDialog = true"
            type="success"
            icon="el-icon-edit"
            style="width: 97px; font-size: 12px; margin-left: 456px"
            >新增目录</el-button
          >
        </el-form-item>
      </el-form>

      <template>
        <el-alert :title="`数据一共${row}条`" type="info" show-icon> </el-alert>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="序号" width="80"> </el-table-column>
          <el-table-column prop="subjectName" label="所属学科" width="177">
          </el-table-column>
          <el-table-column prop="directoryName" label="目录名称" width="174">
          </el-table-column>
          <el-table-column prop="username" label="创建者" width="174">
          </el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="174">
            <template slot-scope="{ row }">
              {{ row.addDate | parseTime }}
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量" width="174">
          </el-table-column>
          <el-table-column prop="state" label="状态" width="174">
            <template slot-scope="{ row }">
              {{ row.state ? '已启用' : '已禁用' }}
            </template>
          </el-table-column>
          <el-table-column prop="edit" label="操作" width="150">
            <template slot-scope="{ row }">
              <el-button type="text" @click="changeState(row.id, row.state)">
                {{ row.state ? '禁用' : '启用' }}</el-button
              >
              <el-button type="text" :disabled="row.state" @click="edit(row)"
                >修改</el-button
              >
              <el-button
                type="text"
                :disabled="row.state"
                @click="delTags(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination
            background
            layout="prev, pager, next,sizes,jumper"
            @current-change="currentChange"
            @size-change="sizeChange"
            :page-size.sync="page.size"
            :current-page.sync="page.page"
            :total="page.total"
          >
          </el-pagination>
        </el-row>
      </template>
    </el-card>

    <!-- 新增标签弹层 -->
    <el-dialog title="新增标签" :visible.sync="addDialog" width="400px">
      <el-form ref="addForm" :model="formData" label-width="80px">
        <el-form-item label="所属学科" prop="subjectID">
          <el-select v-model="formData.subjectID" placeholder="请选择">
            <el-option
              v-for="item in simpleList"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称">
          <el-input v-model="formData.directoryName"></el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </el-row>
    </el-dialog>

    <!-- 修改学科弹层 -->
    <el-dialog title="修改学科" :visible.sync="updateDailog" width="400px">
      <el-form ref="editForm" :model="formData" label-width="80px">
        <el-form-item label="所属学科" prop="subjectID">
          <el-select v-model="formData.subjectID" placeholder="请选择">
            <el-option
              v-for="item in simpleList"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称">
          <el-input v-model="formData.directoryName"></el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button @click="closeUpdateDailog">取 消</el-button>
        <el-button type="primary" @click="updateOk">确 定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  add,
  remove,
  update,
  changeState
} from '@/api/hmmm/directorys.js'
import { simple } from '@/api/hmmm/subjects.js'
export default {
  data () {
    return {
      qiyong: true,
      form: {
        directoryName: '',
        state: ''
      },
      tableData: [],
      value: '',
      stateList: [
        {
          value: '1',
          label: '启用'
        },
        {
          value: '0',
          label: '禁用'
        }
      ],
      row: '',
      page: {
        page: 1, // 当前所在的页数
        size: 10, // 每页的条数
        total: 0 // 总的数据条数
      },
      addDialog: false,
      updateDailog: false,
      formData: {
        directoryName: '',
        subjectID: '',
        id: ''
      },
      state: '',
      simpleList: []
    }
  },
  created () {
    this.simple()
    this.getList()
  },
  methods: {
    async changeState (id, state) {
      this.qiyong = !this.qiyong
      this.state = state === 0 ? 1 : 0
      await changeState({
        state: this.state,
        id: id
      })
      this.getList()
    },
    edit (row) {
      this.formData = row
      this.updateDailog = true
    },
    async currentChange (newPage) {
      this.page.page = newPage
      const res = await list(this.page)
      this.tableData = res.data.items
      // console.log(res)
    },
    async sizeChange (newPage) {
      this.page.size = newPage
      const res = await list(this.page.size)
      this.tableData = res.data.items
      // console.log(res)
    },

    async search () {
      const res = await list(this.form)
      console.log(res.data.items)
      this.tableData = res.data.items
    },

    async delTags (id) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(id)
        this.$message.success('删除学科成功')
        this.getList()
      } catch (err) {
        console.log(err)
      }
    },
    async updateOk () {
      try {
        await this.$refs.editForm.validate()
        await update(this.formData)
        this.$message.success('修改学科成功')
        this.getList()
        this.closeUpdateDailog()
      } catch (err) {
        console.log(err)
      }
    },

    async btnOk () {
      try {
        // await this.$refs.addForm.validate()
        await add(this.formData)
        this.$message.success('新增学科成功')
        this.getList()
        this.closeDialog()
      } catch (err) {
        console.log(err, 2)
      }
    },
    closeUpdateDailog () {
      this.$refs.editForm.resetFields()
      this.updateDailog = false
    },
    closeDialog () {
      this.$refs.addForm.resetFields()
      this.addDialog = false
    },
    // 获取目录列表
    async getList () {
      const res = await list()
      this.tableData = res.data.items
      this.row = res.data.counts
      this.page.total = res.data.counts
      console.log(res.data)
    },
    // 获取目录简单列表
    async simple () {
      const res = await simple()
      // console.log(res.data)
      this.simpleList = res.data
    },
    remove () {
      this.form = {
        directoryName: '',
        state: ''
      }
    }
  }
}
</script>

<style scoped lang="less"></style>
